<template>
  <div class="sales-board">
    <div class="sales-board-intro">
      <h2>流量分析</h2>
      <p>是指在获得网站访问量基本数据的情况下对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目前网络营销活动中可能存在的问题，并为进一步修正或重新制定网络营销策略提供依据。当然这样的定义是站在网络营销管理的角度来考虑的</p>
    </div>
    <div class="sales-board-form">
      <div class="sales-board-line">
        <div class="sales-board-line-left">
          购买数量：
        </div>
        <div class="sales-board-line-right">
          <counter :max="99" :min="1" @emit-on-change="onParamChange('buyNum', $event)"></counter>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">
          产品类型：
        </div>
        <div class="sales-board-line-right">
          <selection :selections="buyTypes" @emit-on-change="onParamChange('buyType', $event)"></selection>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">
          有效时间：
        </div>
        <div class="sales-board-line-right">
          <chooser :selections="periodList" @emit-on-change="onParamChange('period', $event)"></chooser>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">
          产品版本：
        </div>
        <div class="sales-board-line-right">
          <multiply-chooser :selections="versionList" @emit-on-change="onParamChange('versions', $event)"></multiply-chooser>
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">
          总价：
        </div>
        <div class="sales-board-line-right">
          {{total}} 元
        </div>
      </div>
      <div class="sales-board-line">
        <div class="sales-board-line-left">&nbsp;</div>
        <div class="sales-board-line-right">
          <a href="javascript:void(0);" class="btn btn-submit">立即购买</a>
        </div>
      </div>
    </div>
    <div class="sales-board-des">
      <h2>产品说明</h2>
      <p>网站访问统计分析报告的基础数据源于网站流量统计信息，但其价值远高于原始数据资料。专业的网站访问统计分析报告对网络营销的价值，正如专业的财务分析报告对企业经营策略的价值。</p>

      <h3>用户行为指标</h3>
      <ul>
        <li>用户行为指标主要反映用户是如何来到网站的、在网站上停留了多长时间、访问了哪些页面等，主要的统计指标包括：</li>
        <li>用户在网站的停留时间；</li>
        <li>用户来源网站（也叫“引导网站”）；</li>
        <li>用户所使用的搜索引擎及其关键词；</li>
        <li>在不同时段的用户访问量情况等。</li>
      </ul>

      <h3>浏览网站方式</h3>
      <ul>
        <li>用户上网设备类型</li>
        <li>用户浏览器的名称和版本</li>
        <li>访问者电脑分辨率显示模式</li>
        <li>用户所使用的操作系统名称和版本</li>
        <li>用户所在地理区域分布状况等</li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import Counter from '../../components/base/Counter.vue'
  import Selection from '../../components/base/Selection.vue'
  import Chooser from '../../components/base/Chooser.vue'
  import MultiplyChooser from '../../components/base/MultiplyChooser.vue'

  //引入组件
  @Component({
    components: {
      'selection' : Selection,
      'counter' : Counter,
      'multiplyChooser' : MultiplyChooser,
      'chooser' : Chooser
    }
  })
  export default class Detail extends Vue {
    buyNum = 1
    buyType = {
      label: '入门版',
      value: 0
    }
    versions = [{
      label: '客户版',
      value: 0
    }]
    period = {
      label: '半年',
      value: 0
    }

    versionList = [{
        label: '客户版',
        value: 0
      },
      {
        label: '代理商版',
        value: 1
      },
      {
        label: '专家版',
        value: 2
      }]

    periodList = [{
        label: '半年',
        value: 0
      },
      {
        label: '一年',
        value: 1
      },
      {
        label: '三年',
        value: 2
      }]

      buyTypes = [{
        label: '入门版',
        value: 0
      },
      {
        label: '中级版',
        value: 1
      },
      {
        label: '高级版',
        value: 2
      }]

    //计算属性
    get total(){
      let t = 0
      t = this.buyNum + 80 + this.buyType.value + 20 + this.period.value + 90
      return t
    }

    //methods
    //获取子组件的返回值
    onParamChange (attr, val) {
      this[attr] = val
      console.log(attr,val)
    }
  }
</script>

<style lang="scss" scoped>
</style>
